<template>
  <div class="content">
    <el-tabs type="border-card" v-model="activeName" class="demo-tabs" @tab-change="handleClick">
      <el-tab-pane v-for="tag of tags" :key="tag.name" :label="tag.label" :name="tag.name">
        <div class="svg-icons" v-if="tag.list">
          <div v-for="svg of tag.list" :key="svg" v-copy class="icon">
            <SvgIcon :icon-class="svg" :iconType="tag.iconType" :width="'25px'" :height="'25px'" />
            <span class="text">{{ svg }}</span>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <T_Provider
      v-if="total > 100"
      :total="total"
      :page-sizes="[100, 200, 500]"
      v-model:current-page="page.currentPage"
      v-model:page-size="page.pageSize"
    ></T_Provider>
  </div>
</template>
<script setup lang="ts" name="Svgs">
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const svgs = import.meta.glob('@assets/svg/*.svg')
/**
 * @return {Non Responsive Data}
 * **/
const pageDefault = {
  currentPage: 1,
  pageSize: 100
}
/**
 * @return {data,compouted}
 * **/
const activeName = ref<string>('svgs')
const page = reactive({ ...pageDefault })
const svgsList = computed(() => {
  return Object.keys(svgs).map(path => {
    const index = path.lastIndexOf('/') // lastIndexOf("/")  找到最后一个  /  的位置
    const fileType = path.slice(index + 1) // substr() 截取剩余的字符，即文件名doc
    return fileType.substring(0, fileType.lastIndexOf('.'))
  })
})
const ele_icons_all = computed(() => {
  return Object.entries(ElementPlusIconsVue).map(item => item[1].name)
})
const tags = computed<
  Array<{
    label: string
    name: string
    list?: Array<string>
    iconType?: 'svg' | 'element'
  }>
>(() => {
  const ele_icons = ele_icons_all.value.slice(
    (page.currentPage - 1) * page.pageSize,
    page.currentPage * page.pageSize
  )
  return [
    { label: 'Svgs', name: 'svgs', list: svgsList.value, iconType: 'svg' },
    { label: 'Element', name: 'element', list: ele_icons, iconType: 'element' }
  ]
})
const total = computed(() => {
  return activeName.value === 'element' ? ele_icons_all.value.length : svgsList.value.length
})
/**
 * @return {methods}
 * **/
const handleClick = () => {
  Object.assign(page, pageDefault)
}
</script>
<style lang="scss" scoped>
.content {
  height: 100%;
  .svg-icons {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    display: -webkit-flex; /* Safari */
    .icon {
      width: 10%;
      height: 10%;
      cursor: pointer;
      border: 1px solid #e5e9f2;
      display: flex;
      white-space: normal;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: all 0.5s;
    }
    .icon:hover {
      background-color: #d3dce6;
    }
  }
  .demo-tabs {
    height: calc(100% - 40px);
    :deep(.el-tabs__content) {
      height: calc(100% - 40px);
      overflow-y: auto;
      .el-tab-pane {
        height: 100%;
      }
    }
  }
}
</style>
